DOM基本操作
查看滚动条的滚动距离 IE9能用,
window.pageXOffset,window.pageYOffset
IE9以下
document.body.scollLeft//scollTop
document.document.body.scollLeft//scollTop
一个为0一个不为0，相加
<!DOCTYPE html>删除就是怪异模式  DTD
<html>
<head>
	<title></title>

</head>
<body>
	<hr style="width: 10000px">
	<div style="width: 100px ;height: 100px ;background-color:red ;position:absolute;top: 100px;left: 100px" >12</div>
</body>
</html>
封装方法：求滚动条的距离
<script type="text/javascript">
	function getScollOffset(){
		if(window.pageXOffset){
			return {
				x : window.pageXOffset,
				y : window.pageYOffset
			}
		}else{//IE浏览器使用
			return {
				x : document.body.scollLeft + document.document.body.scollLeft,
				y : document.body.scollTop + document.document.body.scollTop
			}
		}
	}
</script>

查看视口的尺寸
window.innerWidth
window.innerHeight
<script type="text/javascript">
	console.log(window.innerWidth)
</script>

浏览器有两种渲染模式：标准模式和怪异模式，兼容向前版本，兼容以前语法

ie8及以下使用
//标准模式下，任何浏览器都支持
document.documentElement.clientWidth/clientHeight

适用于怪异模式浏览器
documentElement.clientWidth/clientHeight
封装查看尺寸方法
<script type="text/javascript">
	function getViewportOffset () {
		if(window.innerWidth){
			return {//ie9以上
				w : window.innerWidth,
				h : window.innerHeight
			}
		}else{
			if(document.compatMode === "BackCompat"){//怪异模式
				return {
					w : document.body.clientWidth,
					h : document.body.clientHeight
				}
			}else{//标准模式
				return {
					w : document.document.body.clientWidth,
					h : document.document.body.clientWidth
				}
			}
		}
	}
</script>

查看元素的几何尺寸
domEle.getBoundingClientRect();兼容性很好 ES5新方法
静态的写照，不是实时
该方法返回一个对象，对象里有left,top,right,bottom属性。left,top代表该元素左上角代表的坐标，right和bottom代表右下角的坐标；
height和width属性在ie里没有
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0];
	console.log(div.getBoundingClientRect());
	//查看元素的尺寸
	console.log(div.offsetWidth);
	console.log(div.offsetHeight);
	//查看元素的位置
	console.log(div.offsetTop);
	console.log(div.offsetLeft);//对于无定位父级的元素，返回相对文档的坐标。对于有定位父级的元素，返回相对于最近的有定位的父级的坐标
	//返回最近的有定位的父级，如过没有返回body,body.offsetParent = null
	console.log(div.offsetParent);
</script>




